<template>
    <span class="buttons">
        <el-link
            v-for="button in disButtons"
            :type="button.type || 'primary'"
            @click="button.action(data)"
            class="button"
            :disabled="button.finalDisabled"
            :icon="button.icon"
        >
            {{ button.label }}
        </el-link>
        <el-dropdown v-if="hideButtons.length">
            <el-icon class="cursor-pointer">
                <MoreFilled />
            </el-icon>
            <template #dropdown>
                <el-dropdown-item v-for="button in hideButtons">
                    <el-link :type="button.type || 'primary'" @click="button.action(data)" class="button" :disabled="button.finalDisabled" :icon="button.icon">
                        {{ button.label }}
                    </el-link>
                </el-dropdown-item>
            </template>
        </el-dropdown>
    </span>
</template>
<script setup>
import { computed } from "vue";
import * as _ from "lodash";

const props = defineProps({
    buttons: { type: Array, required: true },
    data: {},
    showCount: { type: Number, default: 4 },
});

const finalButtons = computed(() => {
    const buttons = _.cloneDeep(props.buttons);

    return buttons
        .filter((button) => {
            if (button.display == false) {
                return false;
            } else if (!button.display) {
                return true;
            }
            return button.display(props.data);
        })
        .map((button) => {
            if (button.disabled == true) {
                button.finalDisabled = true;
            } else if (!button.disabled) {
                button.finalDisabled = false;
            } else {
                button.finalDisabled = button.disabled(props.data);
            }
            return button;
        });
});

const disButtons = computed(() => {
    let buttons = finalButtons.value;

    const len = buttons.length;
    if (len < props.showCount) {
        return buttons;
    }

    return buttons.slice(0, props.showCount);
});

const hideButtons = computed(() => {
    const buttons = finalButtons.value;
    const len = buttons.length;
    if (len < props.showCount) {
        return [];
    }

    return buttons.slice(props.showCount);
});
</script>

<style lang="scss" scoped>
.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .button {
        margin-right: 8px;
    }
}
</style>
